// 获取当前商品的ID
let goodsId = wj.getUrlValue('goodsId');
let catId = wj.getUrlValue('catId');

// 面包导航
let oNowBreadcrumb = document.querySelector('.now-breadcrumb');
oNowBreadcrumb.innerHTML = CAT_DATA.filter(item => item.cat_id == catId)[0].cat_name;

let oGoodsContent = document.querySelector('.goods-content');

// 请求数据
wj.ajax({
	url: BASE_URL + '/api_goods',
	data: {goodsId},
	success(res){
		console.log(res);
		if(res.code != 0){
			console.log(res);
			return;
		};
		// 验证商品有没有
		if(res.data.length == 0){
			oGoodsContent.innerHTML = '此商品已下架...';
			return;
		};
		
		// 获取商品
		let goods = res.data[0];
		// 获取轮播
		let goodsBanner = goods.banner;
		// 商品详情图片
		let productBanner = goods.product_banner;
		
		// 调用渲染放大镜的方法
		zoomRender(goodsBanner);
		
		// 调用渲染右边商品详情的方法
		productRightRender(goods);
		
		let oDetailImg = document.querySelector('.detail-img');
		let strDetail = '';
		productBanner.forEach(item => {
			strDetail += `<img src="${item}" />`;
		});
		oDetailImg.innerHTML = strDetail;
	},
	
});

//封装放大镜渲染的方法
function zoomRender(data){
	// 放大镜父级
	let oProductLeft = document.querySelector('.product-left');
	let oZoomUp = document.querySelector('.zoom-up');
	let oSlide = document.querySelector('.slide');
	let oSmallImg = document.querySelector('.small-img');
	let oZoomBig = document.querySelector('.zoom-big');
	let oBigImg = document.querySelector('.big-img');
	
	// 下面列表
	let oZoomDownList = document.querySelector('.zoom-down-list');
	//操作DOM
	
	// 设置默认
	oSmallImg.src = data[0];
	oBigImg.src = data[0];	
	
	// 列表
	let str = '';
	data.forEach(item => {
		str += `<li><img src="${item}" alt="" /></li>`;
	});
	// 添加
	oZoomDownList.innerHTML = str;
	
	//一定是上面添加li成功, 设置下面列表宽度
	let aLi = document.querySelectorAll('.zoom-down-list li');
	let liW = aLi[0].offsetWidth + parseInt(getComputedStyle(aLi[0])['marginRight']);
	oZoomDownList.style.width = liW * aLi.length + 'px';
	
	// 调用放大镜功能效果方法
	
};

// 封装放大镜功能效果方法
function zoomHandler(){};

// 封装渲染右边商品详情的方法
function productRightRender(data){
	let oProductRight = document.querySelector('.product-right');
	oProductRight.innerHTML = `
		<p class="start"><span class="iconfont icon-aixin_shixin"></span><span>${data.star_number}</span></p>
		<p class="brand">${data.brand_name}</p>
		<p class="goods-name">${data.goods_name}</p>
		<p class="price"><span>价格:</span><span>${data.price}</span></p>
		<p>免运费</p>
		<p>统一使用轮播图片进行渲染</p>
		<p>数量<button class="reduce">减</button><span class="goods-count">1</span><button class="add">加</button></p>
		<button class="now-buy">立即购买</button>
		<button class="add-cart">加入购物车</button>
	`;
	
	// 上面添加到页面后，选择元素操作
	let oReduce = document.querySelector('.reduce');
	let oAdd = document.querySelector('.add');
	let oGoodsCount = document.querySelector('.goods-count');
	let oNowBuy = document.querySelector('.now-buy');
	let oAddCart = document.querySelector('.add-cart');
	
	let num = 1;
	// 设置一下
	oGoodsCount.innerHTML = num;
	
	// 点击减
	oReduce.onclick = function(){
		num = --num <= 1 ? 1 : num;
		oGoodsCount.innerHTML = num;
	};
	
	// 点击加
	oAdd.onclick = function(){
		num = ++num >= 10 ? 10 : num;
		oGoodsCount.innerHTML = num;
	};
	
	// 点击立即购买
	oNowBuy.onclick = function(){
		let USERNMAE = localStorage.getItem('username');
		let TOKEN = localStorage.getItem('token');
		// 验证登录状态
		if(!USERNAME || !TOKEN){
			alert('请先登录');
			return;
		};
		
		//先加入结算清单，跳转到地址页面
		wj.ajax({
			method: 'post',
			url: BASE_URL + '/api_settlement',
			data: {
				status: 'addsettlement',
				userId: localStorage.getItem('token'),
				from: 'product',
				goodsId,
				goodsNumber: num
			},
			success(res){
				console.log(res);
				if(res.code != 0){
					console.log(res);
					return;
				};
				
				// 加入结算成功
				alert('加入结算成功');
				// 跳转到地址页面
				location.href = 'address.html';
			},
		})
		
	};
	
	// 点击加入购物车
	oAddCart.onclick = function(){
		let USERNMAE = localStorage.getItem('username');
		let TOKEN = localStorage.getItem('token');
		// 验证登录状态
		if(!USERNAME || !TOKEN){
			alert('请先登录');
			return;
		};
		
		// 加车
		wj.ajax({
			method: 'post',
			url: BASE_URL + '/api_cart',
			data: {
				status : 'addcart',
				goodsId,
				userId: TOKEN,
				goodsNumber: num
			},
			success(res){
				// console.log(res);
				if(res.code != 0){
					console.log(res);
					return;
				};
				// 交互 弹出好看的框
				alert('加入购物车成功');
				// 调用头部的购物车方法
				getCartValue();
			},
		})
		
	};
	
	
};



